<template>
  <div class="map-box">
    <div class="map" id="map"></div>

  </div>
</template>

<script>
import  ol from "ol";
import * as turf from '@turf/turf';
import Map from "ol/Map";
import layerTile from "ol/layer/Tile";
import {OSM} from "ol/source";
import View from "ol/View";

export default {
  name: "index.vue",
  data() {
    return {
      map: null,
      overlay: null,
      clusterSource: null
    };
  },

  methods: {
//初始化地图
    init() {
      this.map = new Map({
        target: "map",
        layers: [
          new layerTile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });
    },

  },
  //绘制缓冲区失败
/*
  cc: function () {
    //创建缓冲数据
    var point = turf.point([114.2058, 33.2469]);
    var buffered = turf.buffer(point, 0.2, {units: 'kilometers'});
//创建数据geojson对象和数据源对象
    var format = new ol.format.GeoJSON();
    var source = new ol.source.Vector()
//读取geojson数据
    var a = format.readFeature(point);
    var b = format.readFeature(buffered);
//将数据添加数据源的
    source.addFeature(a);
    source.addFeature(b);
//添加图层
    var test = new ol.layer.Vector({source: source})
    map.addLayer(test);

  },*/


  mounted() {
    this.init();
  }
}

</script>

<style lang="less" scoped>
.map-box,
.map {
  height: 100%;
}
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.ol-popup-closer:after {
  content: "✖";
}
</style>